<template>
  <div>
    <ul>
      <li><router-link to="/a">A</router-link></li>
      <li><router-link to="/b">B</router-link></li>
    </ul>
    <transition>
      <keep-alive>
        <router-view />
      </keep-alive>
    </transition>

    <!-- 渲染动态组件 -->
    <component :is="comp" />
  </div>
</template>

<script>
// import A from "./A.vue";
import B from "./B.vue";

export default {
  name: "App",
  data() {
    return {
      comp: B,
    };
  },
};
</script>

<style>
/* 从隐藏到显示 */
.v-enter {
  opacity: 0;
}
.v-enter-active {
  transition: 1s opacity;
}
.v-enter-to {
  opacity: 1;
}
</style>
